<template>
	<ul class="list">
		<li class="item" v-for="item of letters" :key="item" 
		@touchstart.prevent="handleTouchStart"
		@touchmove='handleTouchMove'
		@touchend="handleTouchEnd"
		@click="handleLetterClick" :ref="item">{{item}}</li>
	</ul>
</template>

<script>
export default {
	name:'CityAlphabet',
	props:{
		cities:Object
	},
	data () {
		return {
			touchStatus:false,
			startY:0,
			timer:null
		}
	},
	updated () {
		this.startY=this.$refs['A'][0].offsetTop
	},
	computed: {
		//构建字母数组
		letters () {
			const letters=[]
			for(let i in this.cities){
				letters.push(i)
			}
			return letters
		}
		
	},
	methods:{
		handleLetterClick(e){
			// 当点击字母时向外触发事件
		this.$emit('change',e.target.innerHTML)
			
		},
		handleTouchStart () {
			this.touchStatus=true
		},
		handleTouchMove (e) {
			if(this.touchStatus) {
				//函数节流
				if(this.timer){
					clearTimeout(this.timer)
				}
				//获取字母据顶部的高度
				this.timer =setTimeout (()=>{
				const touchY=e.touches[0].clientY -79
				const index =Math.floor((touchY -this.startY)/20)
				if(index >= 0 &&index<this.letters.length){
					this.$emit('change',this.letters[index])
				}
			},16)
		}
		},
		handleTouchEnd () {
			this.touchStatus=false
			
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
	.list
		display: flex
		flex-direction: column
		justify-content: center
		position: absolute
		top: 1.58rem
		right: 0
		bottom: 0
		width: .4rem
		.item
			line-height: .44REM
			text-align: center
			color:$bgcolor
</style>
